<template>
  <div>
    <div class="title">账号设置</div>

    <div class="item">
      <div class="itemName">用户名</div>
      <div class="itemInfo">
        <div>{{ userInfo.in_username }}</div>
      </div>
    </div>
    <div class="item">
      <div class="itemName">邮箱验证</div>
      <div class="itemInfo">
        <!-- <div>{{ userInfo.in_mail }}</div> -->
        <div v-if="userInfo.in_mail">
          您验证的邮箱：{{
            hideEmail(userInfo.in_mail)
          }}，若已丢失或停用，请立即更换，避免账号被盗
        </div>
        <div v-else>请绑定邮箱</div>
        <div class="operate">
          <el-button
            size="small"
            @click="commandDialog({ title: '换绑邮箱', result: true })"
            >换绑邮箱</el-button
          >
        </div>
      </div>
    </div>
    <div class="item">
      <div class="itemName">手机验证</div>
      <div class="itemInfo">
        <div v-if="userInfo.in_mobile">
          您验证的手机：{{
            hidePhoneNumber(userInfo.in_mobile)
          }}，若已丢失或停用，请立即更换，避免账号被盗
        </div>
        <div v-else>请绑定手机</div>
        <div class="operate" v-if="!userInfo.in_mobile">
          <el-button
            size="small"
            @click="commandDialog({ title: '绑定手机号', result: true })"
            >绑定手机号</el-button
          >
        </div>
      </div>
    </div>
    <div class="item">
      <div class="itemName">登录密码</div>
      <div class="itemInfo">
        <div>建议使用6-16个字符，可包括大小写字母和数字,初始密码为123456。</div>
        <div class="operate">
          <el-button
            size="small"
            @click="$router.push({ name: 'resetPassword' })"
            >修改密码</el-button
          >
        </div>
      </div>
    </div>
    <div class="item">
      <div class="itemName">实名认证</div>
      <div class="itemInfo">
        <!-- 0未认证1通过2认证中3失败 -->
        <div v-if="userInfo.in_verify == 0">未认证</div>
        <div v-if="userInfo.in_verify == 1">认证成功</div>
        <div v-if="userInfo.in_verify == 2">认证中</div>
        <div v-if="userInfo.in_verify == 3">认证失败</div>
        <div class="operate">
          <el-button size="small" @click="$emit('gotoAuch')"
            >实名认证</el-button
          >
        </div>
      </div>
    </div>
    <!-- <div class="item">
      <div class="itemName">绑定微信</div>
      <div class="itemInfo">
        <div>未绑定</div>
        <div class="operate">
          <el-button size="small" @click="weixinDialogVisible=true">绑定</el-button>
        </div>
      </div>
    </div> -->

    <!-- <div class="item" data-position="bottom">
      <div class="itemName">验证开关</div>
      <div class="itemInfo">
        <div>
          开启后此账号下的应用更新、删除，将做二次验证，系统默认关闭，如有需要请自行开启。
        </div>
        <div class="operate-2">
          <el-button size="small">开启</el-button>
          <el-button size="small" type="primary">关闭</el-button>
        </div>
      </div>
    </div> -->

    <!-- <el-dialog
      title="换绑微信"
      :visible.sync="weixinDialogVisible"
      width="30%"
    >
      <el-form label-position="left" label-width="80px" :model="wxForm">
        <el-form-item label="微信号">
          <el-input v-model="wxForm.code"></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="weixinDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="changeWeiXin">确 定</el-button>
      </span>
    </el-dialog> -->

    <SentCodeDialog
      v-for="item in sendCodeState"
      :key="item.title"
      :title="item.title"
      :numTitle="item.numTitle"
      :errorMsg="item.errorMsg"
      :showDialog="item.showDialog"
      @commandDialog="commandDialog"
      @changeNum="changeNum"
      @sendCode="sendCode"
    ></SentCodeDialog>
  </div>
</template>

<script>
import { mapActions } from "vuex";
import {
  sendEmailCodeApi,
  sendMobileCodeApi,
  changeEmailApi,
  changeMobileNumberApi,
} from "@/api/person";
import SentCodeDialog from "./component/SentCodeDialog.vue";
import { Message } from "element-ui";
export default {
  data() {
    return {
      // userInfo:{}
      weixinDialogVisible: false,
      wxForm: {
        code: "",
      },
      sendCodeState: [
        {
          title: "换绑邮箱",
          errorMsg: "请输入邮箱",
          numTitle: "邮箱地址",
          showDialog: false,
          requstFiled: "in_mail",
          sendCodeApi: (data) => sendEmailCodeApi(data),
          changeNumApi: (data) => changeEmailApi(data),
        },
        {
          title: "绑定手机号",
          errorMsg: "请输入手机号",
          numTitle: "手机号码",
          showDialog: false,
          requstFiled: "in_mobile",
          sendCodeApi: (data) => sendMobileCodeApi(data),
          changeNumApi: (data) => changeMobileNumberApi(data),
        },
      ],
    };
  },
  props: ["userInfo"],
  components: { SentCodeDialog },
  created() {},
  computed: {
    hidePhoneNumber: () => (phoneNumber) => {
      if (!phoneNumber) return "请绑定手机";
      return phoneNumber.replace(/(\d{3})\d{4}(\d{4})/, "$1****$2");
    },
    hideEmail: () => (email) => {
      if (!email) return "请绑定邮箱";
      const atIndex = email.indexOf("@");
      if (atIndex >= 0) {
        const username = email.substr(0, atIndex);
        const domain = email.substr(atIndex);
        const hiddenUsername =
          username.slice(0, Math.floor(username.length / 2)) + "****";
        return hiddenUsername + domain;
      }
      return email;
    },
  },
  methods: {
    // 控制对话框
    commandDialog(data) {
      const index = this.sendCodeState.findIndex(
        (item) => item.title === data.title
      );
      if (index !== -1) this.sendCodeState[index].showDialog = data.result;
    },
    // 发送验证码
    sendCode(data) {
      const index = this.sendCodeState.findIndex(
        (item) => item.title === data.title
      );
      if (index !== -1)
        this.sendCodeState[index].sendCodeApi(data.num).then((res) => {
          if (res.status === 0) {
            Message.success(res.message);
          } else {
            Message.error(res.message);
          }
        });
    },
    // 改变号码（邮箱 手机号）
    changeNum(data) {
      const index = this.sendCodeState.findIndex(
        (item) => item.title === data.title
      );
      if (index !== -1) {
        const item = this.sendCodeState[index];
        const obj = { code: data.form.code };
        obj.in_userpassword = data.form.in_userpassword;
        obj[item.requstFiled] = data.form.num;

        item.changeNumApi(obj).then((res) => {
          if (res.status === 0) {
            Message.success(res.message);
            this.commandDialog({ title: data.title, result: false });
            window.location.reload();
          } else {
            Message.error(res.message);
          }
        });
      }
    },
  },
};
</script>

<style scoped lang="scss">
.title {
}

::v-deep .el-button {
  width: 120px;
}

.item {
  display: flex;
  align-items: center;
  padding: 10px;
  border-bottom: 2px solid #ddd;

  .itemName {
    width: 50px;
    margin-right: 20px;
    min-height: 32px;
    display: flex;
    align-items: center;
  }

  .itemInfo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex: 1;

    .operate {
      width: 120px;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .operate-2 {
      width: 120px;
      overflow: hidden;
      display: flex;
      justify-content: space-between;
      align-items: center;

      ::v-deep .el-button {
        width: 45%;
        padding-left: 0;
        padding-right: 0;
      }
    }
  }

  &[data-position="bottom"] {
    border-bottom: none;
    color: red;
  }
}
</style>
